<template>
  <div class="home-page">
    <!-- 轮播图 -->
    <!--<n-carousel class="main-banner wd:w-full" :draggable="true">
      <a v-for="item in banner" :href="item.path">
        <div>
          <img class="wd:w-full" :src="item.img">
          <div class="description">
            <h4 class="" data-aos="fade-up">{{ item.title }}</h4>
            <p class="" data-aos="fade-up">{{ item.subtitle }}</p>
            <span class="" data-aos="fade-up" data-aos-duration="3000"></span>
          </div>
        </div>
      </a>
    </n-carousel>-->
    <swiper class="main-banner wd:w-full" :modules="[Pagination]" :pagination="{el:'.swiper-pagination'}" :loop="true" :draggable="true">
      <swiper-slide v-for="item in banner" :href="item.path">
        <a  :href="item.path">
          <div>
            <img class="wd:w-full" :src="item.img">
            <div class="description">
              <h4 class="" data-aos="fade-up">{{ item.title }}</h4>
              <p class="" data-aos="fade-up">{{ item.subtitle }}</p>
              <span class="" data-aos="fade-up" data-aos-duration="3000"></span>
            </div>
          </div>
        </a>
      </swiper-slide>
      <div class="swiper-pagination"></div>
      <!--<Pagination></Pagination>-->
    </swiper>
    <div class="main-content wd:container-responsive">
      <!--  服务优势  -->
      <div class="adv wd:(w-full sm:p-20px)">
        <div class="wd:(part-title mb-20px)" data-aos="fade-up">MARS MEDIA</div>

        <swiper
            class="adv-content adv-banner swiper-container"
            :slidesPerView="4"
            :spaceBetween="20"
            :breakpoints="breakpoint"
            :loop="true"
            :observer="true"
            :observeParents="true"
        >
          <swiper-slide class="adv-item swiper-slide" v-for="(item,index) in adv" :key="index">
            <a :href="item.path" class="wd:flex-center-col" data-aos="fade-up">
              <div class="wd:(btn-shine w-130px h-130px)">
                <img :src="item.img">
              </div>
              <div class="wd:mt-25px adv-description">
                <h1>{{ item.title }}</h1>
                <p>{{ item.subtitle }}</p>
              </div>
            </a>
          </swiper-slide>
          <!--<Pagination2 class="swiper-pagination"></Pagination2>-->
          <!--<div class="swiper-button-prev"></div>&lt;!&ndash;左箭头。如果放置在swiper-container外面，需要自定义样式。&ndash;&gt;-->
          <!--<div class="swiper-button-next"></div>&lt;!&ndash;右箭头。如果放置在swiper-container外面，需要自定义样式。&ndash;&gt;-->
        </swiper>
      </div>

      <div class="business">
        <div class="wd:(part-title mb-20px)" data-aos="fade-up">
          <h1>业务场景</h1>
          <p class="wd:(text-16px opacity-30 mt-3px leading-normal text-hex-FFFFFF)">各类行业应用</p>
        </div>

      </div>
    </div>
  </div>

</template>
<script lang="ts">export default { name: 'Home' }</script>
<script setup lang="ts">
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
  import { ComponentInternalInstance } from 'vue'
  import { homeData } from '~/api/home'

  const instance: any = getCurrentInstance() as ComponentInternalInstance
  let banner: any = ref([])
  let adv: any = ref([])
  const breakpoint = {
    320: { //当屏幕宽度大于等于320
      slidesPerView: 2,
    },
    768: { //当屏幕宽度大于等于768
      slidesPerView: 2,
    },
    1280: { //当屏幕宽度大于等于1280
      slidesPerView: 4,
    },
  }

  homeData()
      .then((res) => {
        banner.value = res.banner
        adv.value = res.adv
      })
      .catch((err) => {
        console.log('err：', err)
      })
  onMounted(() => {
    // document.addEventListener('aos:in:title', ({ detail }) => {
    // 	console.log('animated in', detail);
    // });
  })

  onUnmounted(() => {

  })
</script>

<style lang="less" scoped>
  @import 'index.less';
</style>
